<script setup>
import AsideCard from './asideCard.vue';
import { inject } from 'vue';

const cardData = {
    title: '排版',
    icon: 'Files'
};

// Directly inject typography object
const { typography } = inject('data');
</script>

<template>
    <div class="aside-layout-main dark-theme">
        <AsideCard :title="cardData.title" :icon="cardData.icon">
            <div class="typography-settings">
                <!-- 行高设置 - directly bound to typography.lineHeight.value -->
                <div class="setting-item">
                    <div class="setting-label">
                        <span>行高</span>
                        <span class="value-display">{{ typography.lineHeight.value }}</span>
                    </div>
                    <el-slider
                        v-model="typography.lineHeight.value"
                        :min="typography.lineHeight.min"
                        :max="typography.lineHeight.max"
                        :step="0.1"
                    />
                </div>

                <!-- 正文字号 - directly bound to typography.fontSize.value -->
                <div class="setting-item">
                    <div class="setting-label">
                        <span>正文字号</span>
                        <span class="value-display">{{ typography.fontSize.value }}px</span>
                    </div>
                    <el-slider
                        v-model="typography.fontSize.value"
                        :min="typography.fontSize.min"
                        :max="typography.fontSize.max"
                        :step="1"
                    />
                </div>

                <!-- 一级标题字号 - directly bound to typography.titleFontSize.value -->
                <div class="setting-item">
                    <div class="setting-label">
                        <span>一级标题</span>
                        <span class="value-display">{{ typography.titleFontSize.value }}px</span>
                    </div>
                    <el-slider
                        v-model="typography.titleFontSize.value"
                        :min="typography.titleFontSize.min"
                        :max="typography.titleFontSize.max"
                        :step="1"
                    />
                </div>

                <!-- 模块标题字号 - directly bound to typography.moduleTitleFontSize.value -->
                <div class="setting-item">
                    <div class="setting-label">
                        <span>模块标题</span>
                        <span class="value-display">{{ typography.moduleTitleFontSize.value }}px</span>
                    </div>
                    <el-slider
                        v-model="typography.moduleTitleFontSize.value"
                        :min="typography.moduleTitleFontSize.min"
                        :max="typography.moduleTitleFontSize.max"
                        :step="1"
                    />
                </div>
            </div>
        </AsideCard>
    </div>
</template>

<style scoped>
/* 黑色主题样式 */
.dark-theme {
    --bg-color: #1a1a1a;
    --card-bg: #242424;
    --text-color: #e0e0e0;
    --border-color: #333;
    --hover-color: #2d2d2d;
    --active-color: #7F56D9;
    --slider-bg: #444;
}

.typography-settings {
    padding: 12px;
}

.setting-item {
    margin-bottom: 20px;
}

.setting-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 14px;
}

.value-display {
    color: var(--active-color);
    font-weight: 500;
    min-width: 50px;
    text-align: right;
}

/* 滑块样式调整 */
:deep(.el-slider) {
    --el-slider-main-bg-color: var(--active-color);
    --el-slider-runway-bg-color: var(--slider-bg);
    --el-slider-button-hover-color: var(--active-color);
    --el-slider-stop-bg-color: var(--text-color);
}

:deep(.el-slider__button) {
    border: 2px solid var(--active-color);
}
</style>